// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

.ctd-hero-wrapper {
    background: $campaign-red;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.hero-easter-egg {
    display: flex;
    position: absolute;
    z-index: 2;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    max-width: 440px;
    margin-top: 110px;

    .toggle-easter-egg {
        height: 180;
        width: 180px;
        margin-bottom: $spacing-md;
    }

    p {
        @include font-size(24px);
        color: $color-black;
        font-weight: 600;
        text-align: center;
    }

    &.hidden {
        display: none;
    }
}

.c-ctd-hero {
    background: $campaign-red;
    padding: 6px 24px 24px;
    width: 100%;

    .c-hero-top {
        display: flex;
        justify-content: flex-end;
        border-bottom: 2.5px solid $campaign-red;
        max-height: 65px;
        padding: 10px $spacing-md;

        &-images {
            align-items: center;
            display: none;

            img {
                max-height: 100%;
                margin-right: $spacing-md;
            }

            .ctd-animated-logo {
                width: 200px;
            }
        }

        @media #{$mq-md} {
            justify-content: space-between;
            padding: 0;
            border-bottom-width: 3px;

            &-images {
                display: flex;
                height: 50px;
                padding: 10px $spacing-md;

                &.active {
                    .firefox-logo, .ctd-logo-sprite {
                        opacity: 1;
                        transform: scale(1);
                    }

                    .ctd-logo-sprite {
                        transition-delay: .25s;
                    }
                }

                @media (prefers-reduced-motion: no-preference) {
                    .firefox-logo, .ctd-logo-sprite {
                        transform: scale(0.25);
                        opacity: 0;
                        transition: all .25s ease-in-out;
                    }
                }
            }
        }

        &-controls {
            display: flex;
            align-items: center;


            .hero-control-btn {
                margin-left: $spacing-sm;
                background: none;
                border: 0;
                display: block;
                background-size: cover;
                width: 20px;
                height: 20px;
            }

            @media #{$mq-md} {
                padding: 10px 16px 0;
                height: 60px;

                .hero-control-btn {
                    width: 26px;
                    height: 26px;
                    margin-left: 12px;
                }
            }

        }

        .minimize {
            background-image: url('/media/img/firefox/challenge-the-default/minimize.svg');
        }

        .expand {
            background-image: url('/media/img/firefox/challenge-the-default/open.svg');
        }

        .close {
            @include image-replaced;
            background-image: url('/media/img/firefox/challenge-the-default/close.svg');
            background-repeat: no-repeat;
            background-size: contain;
            cursor: pointer;
        }
    }

    .hero-wrapper {
        position: relative;
        background: $color-white;
        clip-path: url("#hero-clip-path-mobile");
        transition: opacity 1s;

        @media #{$mq-md} {
            clip-path: url("#hero-clip-path");
        }
    }

    .hero-content-wrapper {
        padding: $spacing-md 0 $spacing-2xl;
        margin: 0 $spacing-lg;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-gap: $spacing-xl;


        @media #{$mq-lg} {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr;
            padding: $layout-md 0 $layout-xl;
            margin: 0 $layout-xl;
        }
    }

    picture {
        grid-row: 1;
        grid-column: auto;
        margin-top: 0;

        @media #{$mq-md} {
            img {
                width: 475px;
            }
        }

        @media #{$mq-lg} {
            grid-column: 2;
        }
    }

    .c-hero-text {
        justify-content: center;

        @media #{$mq-md} {
            min-width: 440px;
            max-width: 80%;
        }

        .hero-text-flex-wrapper {
            display: flex;
            flex-direction: column-reverse;

            .mzp-c-button {
                align-self: flex-start;
                margin-bottom: $spacing-lg;
            }

            @media #{$mq-md} {
                flex-direction: column;

                .mzp-c-button {
                    margin-bottom: 0;
                }
            }
        }

        h1 {
            @include font-size(36px);
            color: $color-black;
            font-weight: 800;
            line-height: 1;
            margin-bottom: $spacing-md;
        }

        p {
            @include font-size(18px);
            color: $color-marketing-gray-70;
            font-weight: 600;
            margin-bottom: $spacing-xl;
            max-width: $content-md;
        }

        .mzp-c-button {
            text-align: center;
            line-height: 1.2;
        }

        .c-button-download-thanks,
        .mzp-c-button-download-privacy-link {
            text-align: left;
        }

        @media #{$mq-md} {
            h1 {
                @include font-size(64px);
            }

            .mzp-c-button {
                text-align: left;
            }
        }
    }

    .icon-firefox {
        @include background-size(0.9em 0.9em);
        background-image: url('/media/protocol/img/logos/firefox/browser/logo.svg');
        background-position: top left;
        background-repeat: no-repeat;
        display: inline-block;
        height: 0.9em;
        vertical-align: middle;
        width: 0.9em;
    }

    // issue 13317
    .fx-unsupported-message {
        @include bidi(((text-align, left, right),));
    }
}

// Hero variations for ad conversion see issue 13915

main[data-variant="2"] {
    .ctd-hero-wrapper,
    .c-ctd-hero {
        background: #2AC3A2;
    }
}

main[data-variant="3"],
main[data-variant="4"] {
    .ctd-hero-wrapper,
    .c-ctd-hero {
        background: #FFBDC5;
    }
}

main[data-variant="2"],
main[data-variant="3"],
main[data-variant="4"],
main[data-variant="5"],
main[data-variant="6"] {
    .c-hero-top {
        border-color: transparent;
    }

    .c-ctd-hero {
        .minimize {
            background-image: url('/media/img/firefox/challenge-the-default/minimize-black.svg');
        }

        .expand {
            background-image: url('/media/img/firefox/challenge-the-default/open-black.svg');
        }

        .close {
            background-image: url('/media/img/firefox/challenge-the-default/close-black.svg');
        }

        .hero-content-wrapper {
            display: block;
        }

        .c-hero-text {
            h1 {
                @include font-size(38px);

                br {
                    display: none;
                }
            }

            @media #{$mq-md} {
                max-width: 100%;
            }

            @media #{$mq-lg} {
                h1 {
                    @include font-size(100px);

                    br {
                        display: inline-block;
                    }
                }
            }
        }
    }
}

@media #{$mq-lg} {
    main[data-variant="6"] {
        .c-ctd-hero .c-hero-text h1 {
            @include font-size(90px);
        }
    }
}

// Custom overrides for various locales
[lang="fr"],
[lang="pl"],
[lang="it"],
[lang="es-ES"] {
    main[data-variant="none"],
    main[data-variant="1"],
    main[data-variant="4"] {
        .c-ctd-hero {
            .hero-content-wrapper {
                display: block;
            }

            .c-hero-text {
                max-width: 100%;

                @media #{$mq-lg} {
                    h1 {
                        @include font-size(84px);
                    }
                }
            }
        }
    }
}
